<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"/>
	<title>网格</title>
	<!-- 基础css  -->
	<link rel="stylesheet" href="css/public.css" />
	<link rel="stylesheet" href="layui/css/layui.css" />
	<link rel="stylesheet" href="css/warning.css" />
	<!-- 首页css  -->
</head>
<body>
	<div class="wTop">
		<div class="wPublic">
			<a class="wTLogo" href="#this"><img src="images/logo.png"></a>
			<div class="fr">
				<a class="wTName" href="#this">
					<img src="images/name.png">
					<em>六小喵</em>
				</a>
				<a class="wTHome" href="#this" title="首页"><img src="images/home.png"></a>
				<a class="wTHome" href="#this" title="消息"><img src="images/news.png"><font>66</font></a>
				<a class="wTHome" href="#this" title="换肤"><img src="images/peeler.png"></a>
				<a class="wTHome" href="#this" title="退出"><img src="images/out.png"></a>
			</div>
		</div>
	</div>
	
	<!--内容-->
		<div class="wPublic">
			<ul class="waTop">
				<li class="layui-col-xs3 layui-col-md1 cur"><a href="#this">预警报告</a><img src="images/arrow.png"></li>
				<li class="layui-col-xs3 layui-col-md1"><a href="#this">预警监测</a><img src="images/arrow.png"></li>
				<li class="layui-col-xs3 layui-col-md1"><a href="#this">历史操作</a><img src="images/arrow.png"></li>
				<li class="layui-col-xs3 layui-col-md1"><a href="#this">名单下载</a><img src="images/arrow.png"></li>
			</ul>
			
			<!--消费预警学生占比-->
				<div class="waPresentation">
					<div class="waPContent layui-col-md11">
						<div class="waPCTitle layui-col-md12">
							<em>消费预警学生占比</em>
							<div class="fr">
								<a class="cur" href="#this">身体</a>
								<a href="#this">心理</a>
							</div>
						</div>
						<div class="waPie layui-col-xs12 layui-col-md6">
							<div id="waConsumption" style="width: 100%;height:320px;"></div>
						</div>
						<ul class="waPNumber waPConsumption layui-col-xs12 layui-col-md6">
							<li>
								<img src="images/waC1.png">
								<div class="fr">
									<p class="waPNOne">3493</p>
									<font>上月高消费预警人数</font>
								</div>
							</li>
							<li>
								<img src="images/waC2.png">
								<div class="fr">
									<p class="waPNTwo">12</p>
									<font>上月低消费预警人数</font>
								</div>
							</li>
							<li>
								<img src="images/waC3.png">
								<div class="fr">
									<p class="waPNThree">456</p>
									<font>上月无消费人数</font>
								</div>
							</li>
							<li>
								<img src="images/waC4.png">
								<div class="fr">
									<p class="waPNFour">2</p>
									<font>本月无消费人数</font>
								</div>
							</li>
							<li>
								<img src="images/waC5.png">
								<div class="fr">
									<p class="waPNFive">674</p>
									<font>上月特殊消费预警人数</font>
								</div>
							</li>
							<li>
								<img src="images/waC6.png">
								<div class="fr">
									<p class="waPNSix">75</p>
									<font>本月特殊消费预警人数</font>
								</div>
							</li>
						</ul>
					</div>
				</div>
			<!--消费预警学生占比 end-->
			
			<!--各级别预警分布-->
				<div class="waPresentation">
					<div class="waPContent layui-col-md11">
						<div class="waPCTitle layui-col-md12">
							<em>各级别预警分布</em>
						</div>
						<div class="layui-col-xs12">
							<form class="layui-form" action="">
								<div class="waPInput wapHide layui-col-xs12 layui-col-md3">
									  <label class="layui-form-label waPWords">年月</label>
								      <div class="layui-input-inline">
								        <input type="text" class="layui-input" id="test3" placeholder="yyyy-MM">
								      </div>
								</div>
								<div class="waPInput layui-col-xs12 layui-col-md3">
									<label class="layui-form-label waPWords">院系</label>
								    <div class="layui-input-inline">
								      <select name="interest" lay-filter="aihao">
								        <option value="0">写作</option>
								        <option value="1">阅读</option>
								        <option value="2">游戏</option>
								        <option value="3">音乐</option>
								        <option value="4">旅行</option>
								      </select>
								    </div>
								</div>
								<div class="waPInput layui-col-xs12 layui-col-md3">
									<button class="layui-btn layui-input-block waP-btn" lay-submit="" lay-filter="demo1">确定</button>
								</div>
						    </form>
						</div>
						<div class="layui-col-xs12">
							<div id="waLevel" style="width: 100%;height:400px;"></div>
						</div>
					</div>
				</div>
			<!--各级别预警分布 end-->
			
			<!--各学院预警排名-->
				<div class="waPresentation">
					<div class="waPContent layui-col-md11">
						<div class="waPCTitle layui-col-md12">
							<em>各学院预警排名</em>
						</div>
						<div class="layui-col-xs12">
							<form class="layui-form" action="">
								<div class="waPInput wapHide layui-col-xs12 layui-col-md3">
									  <label class="layui-form-label waPWords">年月</label>
								      <div class="layui-input-inline">
								        <input type="text" class="layui-input" id="test4" placeholder="yyyy-MM">
								      </div>
								</div>
								<div class="waPInput layui-col-xs12 layui-col-md3">
									<label class="layui-form-label waPWords">院系</label>
								    <div class="layui-input-inline">
								      <select name="interest" lay-filter="aihao">
								        <option value="0">写作</option>
								        <option value="1">阅读</option>
								        <option value="2">游戏</option>
								        <option value="3">音乐</option>
								        <option value="4">旅行</option>
								      </select>
								    </div>
								</div>
								<div class="waPInput layui-col-xs12 layui-col-md3">
									<button class="layui-btn layui-input-block waP-btn" lay-submit="" lay-filter="demo1">确定</button>
								</div>
						    </form>
						</div>
						<div class="layui-col-xs12">
							<div id="waCollege" style="width: 100%;height:400px;"></div>
						</div>
					</div>
				</div>
			<!--各学院预警排名 end-->
			
		</div>
	<!--内容 end-->
	
	<!--底部-->
	<div class="wFooter">
		<p>中国·湖北·武汉市洪山区民族大道182号 027-67842763,027-87532233</p>
		<p>版权所有© 2016 江汉大学 鄂ICP备05003346号 邮编 430074</p>
	</div>
	<!-- 引入 echarts.js -->
	<script src="js/jquery-1.8.3.min.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/consumption.js"></script>
    <script src="js/level.js"></script>
    <script src="js/college.js"></script>
    <script>
    	$(function(){
    		window.onresize = function(){
                 waConsumption.resize();
                 waLevel.resize();
                 waCollege.resize();
			};
    		layui.use(['form','laydate'], function(){
			  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
			  var laydate = layui.laydate; //日期
			  
			  //年月选择器
			  laydate.render({
			    elem: '#test3'
			    ,type: 'month'
			  });
			  laydate.render({
			    elem: '#test4'
			    ,type: 'month'
			  });
			  //……
			  
			  //但是，如果你的HTML是动态生成的，自动渲染就会失效
			  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
			  form.render();
			});
    	})
    </script>
</body>
</html>
